<template>
  <div class="pushDialog" v-show="showPushDialog" @click="close">
    <div class="main" :class="{text: showText, poster: showPoster}" @click.stop>
      <span class="close" @click="close">X</span>
      <div class="textCont" v-show="showText">
        <div class="title">
          <h3>{{textCont.title}}</h3>
        </div>
        <div class="content">
          <p>{{textCont.content}}</p>
          <div>
            <button class="know" @click="close" v-show="textCont.knowOrLook">好的，我知道了!</button>
            <button class="look" v-show="!textCont.knowOrLook"><a :href="textCont.linkUrl" target = "_self">查看详情</a></button>
          </div>
        </div>
      </div>
      <div class="posterCont" v-show="showPoster">
        <a :href="posterLink" target = "_self" v-if="posterLink.length">
          <img :src="posters" alt="">
        </a>
        <img :src="posters" v-else alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pushDialog',
  data () {
    return {
      posters: '',
      posterLink: '',
      showPushDialog: false,
      showPoster: false,
      showText: false,
      textCont: {
        title: '',
        author: '',
        content: '',
        linkUrl: '',
        knowOrLook: true
      },
      autoCloseTimer: null
    }
  },
  mounted () {
    this.getPushInfo()
  },
  methods: {
    getPushInfo () {
      this.axios({
        url: this.$store.state.url.pushPoster.newNesMsg,
        headers: {},
        params: {},
        method: 'get'
      }).then((res) => {
        let getStorage = localStorage.getItem('pushDialog')
        if (res.code.toString() === '0') {
          if (res.data.newsMsg && res.data.newsMsg.indexImgUrl.length > 0) {
            res = res.data.newsMsg
            if (getStorage && getStorage === res.id.toString()) {
              this.showPushDialog = false
            } else {
              localStorage.setItem('pushDialog', res.id.toString())
              this.showPushDialog = true
              this.showPoster = true
              this.posters = res.indexImgUrl
              this.posterLink = res.linkUrl
              this.autoClose()
            }
          } else {
            res = res.data.newsMsg
            if (getStorage && getStorage === res.id.toString()) {
              this.showPushDialog = false
            } else {
              localStorage.setItem('pushDialog', res.id.toString())
              this.showPushDialog = true
              this.showText = true
              this.textCont.title = res.title
              this.textCont.author = res.author
              this.textCont.content = res.content
              this.textCont.linkUrl = res.linkUrl
              if (this.textCont.linkUrl.length) {
                this.textCont.knowOrLook = false
              } else {
                this.textCont.knowOrLook = true
              }
              this.autoClose()
            }
          }
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    close () {
      this.showPushDialog = false
    },
    // 定时器自动关闭 弹窗
    autoClose () {
      if (this.showPushDialog) {
        this.autoCloseTimer && clearTimeout(this.autoCloseTimer)
        this.autoCloseTimer = setTimeout(() => {
          this.close()
        }, 30000)
      }
    }
  }
}
</script>
